<!-- 
    介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面的
        通过websoket通知HMR runtime去更新有变动的模块

    从0开始创建webpack
        五个概念：
            entry：打包入口（路径），{},[],''，三种形式
            output: 输出到哪里去
            loader：处理比如css，img的转换，非js文件处理
            plugins: 处理插件等东西去完成更多的任务
            mode: 'development',开发者模式，配置比较简单，代码能运行即可,'production',配置的会比较复杂一点，做各种兼容处理等等
        创建webpack
            npm init 初始化一个空文件夹生成package.json
            npm i webpack webpack-cli -g
            npm i webpack webpack-cli -D

            新建文件夹src，build
            在src里面创建index.js入口文件，
                简单点例子A
                    里面写一些业务逻辑或者初始化前端框架的内容
                    然后webpack ./src/index.js -o ./build/built.js --mode=development//./src/index.js是入口路径，./build/built.js是导出路径，mode是开发模式
                    如果打包过程中，各种提示cant find module的，使劲安装就行

                    目前如果入口文件引入样式css，是没有办法打包的必须使用loader
            根目录新建webpack.config.js，里面export那五个概念相关的配置
            const {resolve} = require('path')

            module.exports = {
                //入口文件
                entry:'./src/index.js',
                output:{
                    //输出文件名
                    filename:'built.js',
                    //输出文件路径
                    path:resolve(__dirname,'build')
                },
                //loader配置
                module:{
                    rules:[]
                },
                //plugins
                plugins:[],
                //mode
                mode:'development'
                //开发服务器，下载webpack-dev-server包，用npx webpack-dev-server这个指令进行启动，不过目前一言难尽，只有html没有js，css和图片那些资源
                devServer: {
                    contentBase:resolve(__dirname,'build'),//web4版本需要的指令
                    //启动gzip压缩
                    compress:true,
                    port:8888,
                    watchFiles: {
                            paths: 写上你的路径（ resolve(__dirname, "build"))
                            -- 其他配置选项看官网options：
                   }
                }
            }

            rules里面要匹配规则，就
            {
                test:'/\.css$/i',//(.css或者.(jpg|png))那样写，给哪些文件去进行加载相应的loader
                //这里是使用哪些loader
                use:['']//执行顺序，从右到左执行
            }
            rules不需要引入

            plugins里面直接放进去数组里面就行，但需要引入
            


 -->